<template>
  <view class="index-page" >
    <!-- 轮播图 -->
    <view class="banner-section">
      <swiper class="banner-swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
       <swiper-item v-for="(banner, index) in bannerList" :key="index">
          <view class="banner-item" @click="handleBannerClick(banner)">
            <image :src="banner.image" mode="aspectFill" class="banner-image"></image>
          </view>
        </swiper-item>
		<!-- <swiper-item>
		  <view class="banner-item" @click="goToActivity">
		    <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/banner.png" mode="aspectFill" class="banner-image"></image>
		  </view>
		</swiper-item> -->
      </swiper>
    </view>

    <!-- 4个功能模块 -->
    <view class="function-modules">
      <view class="module-item" @click="goToCharging">
        <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/home/ico_home1@2x.png" class="module-icon"></image>
        <text class="module-text">共享充电桩</text>
      </view>
      <view class="module-item" @click="goToParking">
        <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/home/ico_home2@2x.png" class="module-icon"></image>
        <text class="module-text">停车包月</text>
      </view>
      <view class="module-item" @click="goToTicket">
        <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/home/ico_home2备份@2x.png" class="module-icon"></image>
        <text class="module-text">我的券包</text>
      </view>
      <view class="module-item" @click="goToInvoice">
        <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/home/ico_home3@2x.png" class="module-icon"></image>
        <text class="module-text">开发票</text>
      </view>
    </view>

    <!-- 多功能区域 -->
    <view class="multi-function-area">
      <!-- 车牌输入区域 -->
      <view v-if="currentStatus === 'input'" class="license-plate-section">
        <view class="card-header">
          <text>输入车牌号</text>
        </view>
        <view class="plate-input-wrapper">
          <car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum"></car-number-input>
        </view>

        <!-- 历史车牌 -->
        <view class="history-plates">
          <view class="history-plate-item" v-for="(plate, index) in historyPlates" :key="index">
            <text class="plate-text" @click="queryParkingFee(plate)">{{ plate }}</text>
            <uni-icons type="closeempty" size="16" color="#999" @click="removePlate(index)"></uni-icons>
          </view>
        </view>

        <button class="query-btn" @click="queryParkingFee(null)">查询停车费</button>
      </view>

      <!-- 停车中状态 -->
      <view v-if="currentStatus === 'parking'" class="parking-status-section">
        <view class="packing-header">
          <text>{{ currentPlate }}</text>
        </view>

        <!-- 历史车牌 -->
        <view class="history-plates">
          <view class="history-plate-item" v-for="(plate, index) in historyPlates" :key="index">
            <text class="plate-text" @click="queryParkingFee(plate)">{{ plate }}</text>
            <uni-icons type="closeempty" size="16" color="#999" @click="removePlate(index)"></uni-icons>
          </view>
        </view>

        <view class="status-card">
          <view class="card-header1">
            <view class="status-info">
              <text class="location-name">{{ parkingInfo.locationName }}</text>
              <text class="parking-duration">停车时长：{{ parkingInfo.duration }}</text>
            </view>
            <view class="action-button parking-btn" @click="payParkingFee">
              <text class="button-text">去缴费</text>
            </view>
          </view>
          <view class="fee-info">
            <image class="stat-icon"  src="/static/images/ico_money.png" mode="widthFix" />
            <text class="fee-amount">{{ parkingInfo.fee }}</text>
          </view>
          <view class="fee-label-section">
            <text class="fee-label">停车费用(元)</text>
          </view>
        </view>
      </view>

      <!-- 充电中状态 -->
      <view v-if="currentStatus === 'charging'" class="charging-status-section">
        <view class="packing-header">
          <text>{{ currentPlate }}</text>
        </view>
        <!-- 历史车牌 -->
        <view class="history-plates">
          <view class="history-plate-item" v-for="(plate, index) in historyPlates" :key="index">
            <text class="plate-text" @click="queryParkingFee(plate)">{{ plate }}</text>
            <uni-icons type="closeempty" size="16" color="#999" @click="removePlate(index)"></uni-icons>
          </view>
        </view>


        <view class="status-card">
          <view class="card-header1">
            <view class="charging-header-info">
              <!-- <view class="plate-display">
                <text class="plate-number">{{ currentPlate }}</text>
              </view> -->
              <view class="charging-location">
                <text class="location-name">{{ chargingInfo.stationName }}</text>
                <text class="charging-time">已充：{{ chargingInfo.duration }} | 剩余：{{ chargingInfo.remaining }}</text>
              </view>
            </view>
            <view class="action-button charging-btn" @click="stopCharging">
              <text class="button-text">结束充电</text>
            </view>
          </view>
          <view class="charging-progress">
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: chargingInfo.progress + '%' }"></view>
            </view>
          </view>
          <view class="charging-stats">
            <view class="stat-item">
              <view class="stat-value-row">
                <image class="stat-icon" src="/static/images/ico_recharge.png" mode="widthFix" />
                <text class="stat-value">{{ chargingInfo.power }}</text>
              </view>
              <text class="stat-label">已充电量(度)</text>
            </view>
            <view class="stat-item">
              <view class="stat-value-row">
                <image class="stat-icon" src="/static/images/ico_money.png" mode="widthFix" />
                <text class="stat-value">{{ chargingInfo.cost }}</text>
              </view>
              <text class="stat-label">已充电费(元)</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 充电完成状态 -->
      <view v-if="currentStatus === 'completed'" class="charging-status-section">
        <view class="packing-header">
          <text>{{ currentPlate }}</text>
        </view>
        <!-- 历史车牌 -->
        <view class="history-plates">
          <view class="history-plate-item" v-for="(plate, index) in historyPlates" :key="index">
            <text class="plate-text" @click="queryParkingFee(plate)">{{ plate }}</text>
            <uni-icons type="closeempty" size="16" color="#999" @click="removePlate(index)"></uni-icons>
          </view>
        </view>


        <view class="status-card">
          <view class="card-header1">
            <view class="charging-header-info">
              <!-- <view class="plate-display">
                <text class="plate-number">{{ currentPlate }}</text>
              </view> -->
              <view class="charging-location">
                <text class="location-name">{{ chargingCompletedInfo.stationName }}</text>
                <text class="charging-time">已充：{{ chargingCompletedInfo.duration }} | 剩余：{{ chargingCompletedInfo.remaining }}</text>
              </view>
            </view>
            <view class="action-button chargingCompleted-btn" @click="ChargingCompleted">
              <text class="button-text">充电已完成</text>
            </view>
          </view>
          <view class="charging-progress">
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: chargingCompletedInfo.progress + '%' }"></view>
            </view>
          </view>
          <view class="charging-stats">
            <view class="stat-item">
              <view class="stat-value-row">
                <image class="stat-icon" src="/static/images/ico_recharge.png" mode="widthFix" />
                <text class="stat-value">{{ chargingCompletedInfo.power }}</text>
              </view>
              <text class="stat-label">已充电量(度)</text>
            </view>
            <view class="stat-item">
              <view class="stat-value-row">
                <image class="stat-icon" src="/static/images/ico_money.png" mode="widthFix" />
                <text class="stat-value">{{ chargingCompletedInfo.cost }}</text>
              </view>
              <text class="stat-label">已充电费(元)</text>
            </view>
          </view>
        </view>
      </view>



    </view>

    <!-- 搜索栏和筛选tabs - 吸顶区域 -->
    <view class="sticky-header">
      <view class="search-bar">
        <input class="search-input" placeholder="查找充电桩" />
        <uni-icons type="search"  size="20" color="#D8D8D8" class="search-icon"></uni-icons>
      </view>
      <view class="filter-tabs">
        <text
          v-for="(tab, index) in filterTabs"
          :key="index"
          class="filter-tab"
          :class="{ active: activeFilterTab === index }"
          @click="onFilterTabClick(index)"
        >
          {{ tab }}
        </text>
      </view>
    </view>

    <!-- 充电桩列表 -->
    <view class="charging-list-section">
      <view
        v-for="station in chargingStations"
        :key="station.id"
        class="charging-station-item"
        @click="goToChargingDetail(station)"
      >
        <view class="station-container">
          <view class="station-image">
            <image :src="station.image" class="pile-icon" mode="aspectFit"></image>
          </view>
          <view class="station-info">
            <view class="station-header">
              <text class="location-name">{{ station.name }}</text>
              <view >
                <uni-icons type="paperplane-filled" size="14" color="#D4D5D8"></uni-icons>
                <text class="location-distance">{{ station.distance }}</text>
              </view>
            </view>
            <view class="station-details">
              <text class="station-rating">{{ station.rating }} {{ station.status }}</text>
            </view>
            <view class="station-price">
              <text class="price-value">{{ station.price }}</text>
              <view class="charging-type-tag" :class="{ 'slow-charge': station.type === '慢', 'fast-charge': station.type === '快' }">
                <text class="charging-type-text">{{ station.type }}</text>
                <view class="availability-inner">
                  <text class="availability-text">{{ station.available }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 悬浮客服按钮 -->
    <movable-area class="movable-area" v-if="showCustomerService">
      <movable-view class="customer-service" direction="all" @click="openCustomerService">
        <view class="service-button">
          <text class="service-text">专属客服</text>
          <uni-icons type="closeempty" class="service-icon" color="#FFFFFF" :size="16" size="20" @click="closeCustomerService"></uni-icons>
        </view>
      </movable-view>
    </movable-area>
  </view>

  	<!-- 自定义底部导航栏 -->
		<custom-tabbar :current="currentTabIndex" @change="onTabChange" @centerClick="onCenterClick"></custom-tabbar>

    <!-- 使用封装后的弹窗组件 -->
    <DetailPopups
      :showPaymentModal="showPaymentModal"
      :showChargingModal="showChargingModal"
      :currentPlate="currentPlate"
      :parkingInfo="parkingInfo"
      :paymentDetails="paymentDetails"
      :chargingDetails="chargingDetails"
      :isChargingComplete="isChargingComplete"
      @closePaymentModal="closePaymentModal"
      @confirmPayment="confirmPayment"
      @contactService="contactService"
      @closeChargingModal="closeChargingModal"
      @completeCharging="completeCharging"
    />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
import DetailPopups from './detail.vue'
import HomeApi from '@/api/app/home.js'
import LoginUtils from '@/utils/loginUtils.js'

// 响应式数据
const currentTabIndex = ref(0)
const currentStatus = ref('charging') // 'input', 'parking', 'charging','completed'
const currentPlate = ref('皖A00000')
const defaultNum = ref('')
const historyPlates = ref([])
const showCustomerService = ref(true) // 控制悬浮客服按钮显示/隐藏
const showPaymentModal = ref(false) // 控制缴费弹窗显示/隐藏
const showChargingModal = ref(false) // 控制充电详情弹窗显示/隐藏
const isChargingComplete = ref(false) // 充电完成状态，控制弹窗内字段显示

// 停车信息
const parkingInfo = ref({
  locationName: '信誉创谷科技园-地面停车场',
  duration: '2小时24分钟',
  fee: '15.00'
})

// 缴费详情
const paymentDetails = ref({
  entryTime: '2025年8月11日 11:00:00',
  exitTime: '2025年8月11日 13:24:00',
  remainingTime: '0分钟',
  coupon: '无可用优惠券'
})

// 充电详情
const chargingDetails = ref({
  totalCost: '50.00',
  stationName: '新宇创谷A区充电站-1号充电桩',
  pileNumber: '0987654321',
  startDate: '2025年8月11日',
  endDate: '2025年8月11日',
  duration: '1小时25分钟',
  startTime: '10:00:00',
  endTime: '11:25:00',
  chargedAmount: '50',
  remainingAmount: '20',
  estimatedTime: '42分钟',
  chargingType: '快充',
  current: '直流电',
  power: '128W',
  voltage: '220V',
  chargingFee: '39.99',
  serviceFee: '20.01',
  occupancyFee: '0.00',
  coupon: '无可用优惠券'
})

// 充电信息
const chargingInfo = ref({
  stationName: '新余创谷A区充电站',
  duration: '1小时25分钟',
  remaining: '25分钟',
  progress: 80,
  power: '50.00',
  cost: '50.00'
})
// 充电信息
const chargingCompletedInfo = ref({
  stationName: '新余创谷A区充电站',
  duration: '1小时25分钟',
  remaining: '0分钟',
  progress: 100,
  power: '50.00',
  cost: '100.00'
})

const activeFilterTab = ref(0) // 当前选中的筛选tab
const filterTabs = ref(['距离', '价格', '快充', '慢充'])
const chargingStations = ref([])
const bannerList = ref([]) // 轮播图数据
const allStations = ref([
        {
          id: 1,
          name: '新宇建筑楼充电桩场地',
          distance: '43m',
          rating: '4.9分',
          status: '最近充电7分钟前 开放中 限时免费停车场',
          price: '¥1.7886/度',
          type: '快',
          available: '闲12/20',
          image: 'https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/bg_share.png'
        },
        {
          id: 1,
          name: '新宇建筑楼充电桩场地',
          distance: '43m',
          rating: '4.9分',
          status: '最近充电7分钟前 开放中 限时免费停车场',
          price: '¥1.7886/度',
          type: '快',
          available: '闲12/20',
          image: 'https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/bg_share.png'
        },

      ]
)





const navigateToList = () => {
  uni.navigateTo({
    url: '/pages/list/list?type=charging'
  })
}

// 生命周期钩子
onMounted(() => {
  // 从本地存储恢复历史车牌
  const savedHistoryPlates = uni.getStorageSync('historyPlates')
  if (savedHistoryPlates && Array.isArray(savedHistoryPlates)) {
    historyPlates.value = savedHistoryPlates
  }

  // 页面加载时获取充电桩数据
  loadChargingStations()
  // 静默查询车牌状态
  silentQueryPlateStatus()
})

// 页面加载事件处理
onLoad((options) => {
  console.log("页面参数", options);

  // uni.hideTabBar()
  // 通过URL参数控制多功能区域显示状态
  if (options.status) {
    currentStatus.value = options.status
    if (options.plate) {
      currentPlate.value = options.plate
    }

    // 根据状态设置相应的数据
    if (options.status === 'parking') {
      parkingInfo.value = {
        locationName: options.locationName || '停车场名称',
        duration: options.duration || '2小时30分钟',
        fee: options.fee || '15.50'
      }
    } else if (options.status === 'charging') {
      chargingInfo.value = {
        stationName: options.stationName || '充电站名称',
        duration: options.duration || '1小时20分钟',
        remaining: options.remaining || '40分钟',
        progress: parseInt(options.progress) || 65,
        power: options.power || '25.8',
        cost: options.cost || '32.50'
      }
    }
  }
  // 加载轮播图数据
  loadBanners()
})

// 页面显示事件处理
onShow(() => {
    uni.hideTabBar()

  currentTabIndex.value = 0
})

// 方法定义

// 跳转到登录页面
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}

// 功能模块点击事件
const goToCharging = () => {
  LoginUtils.checkStatusToLogin();

  uni.navigateTo({
    url: '/pages/activity/shared-pile/index'
  })
}

const goToParking = () => {
  LoginUtils.checkStatusToLogin();

  console.log('跳转到停车包月')
}

const goToTicket = () => {
  LoginUtils.checkStatusToLogin();

  uni.navigateTo({
    url: '/pages/coupon-pack/index'
  })
}

const goToInvoice = () => {
  LoginUtils.checkStatusToLogin();

  console.log('跳转到开发票')
  uni.navigateTo({
    url:'/pages/invoice/list'
  })
}

// 点击充电桩列表项，跳转到 chargingDetail 页面
const goToChargingDetail = (station) => {
  try {
    if (station && station.name === '新宇建筑楼充电桩场地') {
      uni.navigateTo({ url: '/pages/index/chargingDetail' })
    } else {
      // 其他站点暂时跳转到通用详情页，后续可按需调整
      // 如需仅处理指定站点，也可以不做任何操作
      // uni.showToast({ title: '暂不支持该站点详情', icon: 'none' })
      uni.navigateTo({ url: '/pages/list/detail' })
    }
  } catch (e) {
    console.error('跳转详情失败：', e)
  }
}

// 获取轮播图数据
const loadBanners = async () => {
  try {
	bannerList.value  =  [{
            "id": 1,
            "bizType": 0,
            "title": "HKC屏幕联动",
            "image": "https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/banner.png",
            "clickModel": 0,
            "jumpLink": "/pages/activity/index?activityId=1"
        }]
    // const data = await HomeApi.getBanners()
    // 将API返回的数据格式转换为组件需要的格式
    // bannerList.value = data.map(item => ({
    //   id: item.id,
    //   image: item.image,
    //   jumpLink: item.jumpLink,
    //   clickModel: item.clickModel
    // }))
  } catch (error) {
    console.error('获取轮播图数据失败:', error)

  }
}

// 轮播图点击事件
const handleBannerClick = (banner) => {
  // if (!LoginUtils.checkLoginStatus()) {
    // goToLogin()
    // return
  // }

  // 根据clickModel类型进行不同的跳转处理
  if (banner.clickModel === 0) {
    // 跳转本地文件，携带id参数
    uni.navigateTo({
      url: `${banner.jumpLink}`
    })
  } else if (banner.clickModel === 1) {
    // 跳转外部地址，携带id参数
    const separator = banner.jumpLink.includes('?') ? '&' : '?'
    // const urlWithId = `${banner.jumpLink}${separator}id=${banner.id}`
    const urlWithId = `${banner.jumpLink}`

    // 在小程序中打开外部链接
    uni.navigateTo({
      url: `/pages/webview/index?url=${encodeURIComponent(urlWithId)}`
    })
  }
}

// 打开客服
const openCustomerService = () => {
  console.log('打开专属客服')
}

// 关闭悬浮客服按钮
const closeCustomerService = (event) => {
  event.stopPropagation() // 阻止事件冒泡
  showCustomerService.value = false
}

const numberInputResult = (e) => {
  console.log('结果--' + e)
  defaultNum.value = e
}

const queryParkingFee = (plate) => {
  plate = plate ? plate : defaultNum.value.trim()
  console.log(plate)
  if (plate.length === 7 || plate.length === 8) {
    // 保存最近使用的车牌号到本地存储
    uni.setStorageSync('recentPlate', plate)

    // 添加到历史车牌列表
    if (!historyPlates.value.includes(plate)) {
      historyPlates.value.unshift(plate)
      // 最多保存5个历史车牌
      if (historyPlates.value.length > 5) {
        historyPlates.value.pop()
      }
      // 保存历史车牌到本地存储
      uni.setStorageSync('historyPlates', historyPlates.value)
    }

    uni.navigateTo({
      url: `/pages/order/index?plate=${plate}`
    })
  } else {
    uni.showToast({
      title: '请输入正确的车牌号',
      icon: 'none'
    })
  }
}

const removePlate = (index) => {
  historyPlates.value.splice(index, 1)
}

// 停车费缴费
const payParkingFee = () => {
  showPaymentModal.value = true
}

// 关闭缴费弹窗
const closePaymentModal = () => {
  showPaymentModal.value = false
  showChargingModal.value = false
}

// 确认支付
const confirmPayment = () => {
  showPaymentModal.value = false
  uni.navigateTo({
    url: `/pages/payment/index?type=parking&plate=${currentPlate.value}&fee=${parkingInfo.value.fee}`
  })
}

// 联系客服
const contactService = () => {
  uni.showToast({
    title: '客服功能开发中',
    icon: 'none'
  })
}

//充电中详情
const stopCharging = () => {
  showChargingModal.value = true
  isChargingComplete.value = true
}
// 充电完成
const ChargingCompleted = () => {
  showChargingModal.value = true
  isChargingComplete.value = false
}

// 关闭充电详情弹窗
const closeChargingModal = () => {
  showChargingModal.value = false
  // isChargingComplete.value = false
}

// 完成充电
const completeCharging = () => {
  showChargingModal.value = false
  uni.navigateTo({
    url: '/pages/charge/order?type=settlement'
  })
}

// 静默查询车牌状态
const silentQueryPlateStatus = async () => {
  try {
    // 从本地存储获取最近使用的车牌号
    const recentPlate = uni.getStorageSync('recentPlate')
    if (!recentPlate) {
      return // 没有最近车牌，保持输入状态
    }

    // 模拟调用查询接口
    const statusResult = await queryPlateStatusApi(recentPlate)

    if (statusResult && statusResult.status) {
      currentPlate.value = recentPlate

      if (statusResult.status === 'parking') {
        // 停车中状态
        currentStatus.value = 'parking'
        parkingInfo.value = {
          locationName: statusResult.locationName || '信誉创谷科技园-地面停车场',
          duration: statusResult.duration || '2小时30分钟',
          fee: statusResult.fee || '15.00'
        }
      } else if (statusResult.status === 'charging') {
        // 充电中状态
        currentStatus.value = 'charging'
        chargingInfo.value = {
          stationName: statusResult.stationName || '新宇创谷A区充电站',
          duration: statusResult.duration || '1小时25分钟',
          remaining: statusResult.remaining || '25分钟',
          progress: statusResult.progress || 75,
          power: statusResult.power || '50.00',
          cost: statusResult.cost || '50.00'
        }
      }
    }
  } catch (error) {
    console.log('静默查询车牌状态失败:', error)
    // 查询失败时保持默认的输入状态
  }
}

// 模拟查询车牌状态API
const queryPlateStatusApi = async (plate) => {
  // 模拟网络请求延迟
  await new Promise(resolve => setTimeout(resolve, 500))

  // 模拟返回数据 - 根据车牌号返回不同状态
  if (plate === '吉A66666') {
    return {
      status: 'parking',
      locationName: '信誉创谷科技园-地面停车场',
      duration: '2小时30分钟',
      fee: '15.00'
    }
  } else if (plate === '琼A99999') {
    return {
      status: 'charging',
      stationName: '新宇创谷A区充电站',
      duration: '1小时25分钟',
      remaining: '25分钟',
      progress: 75,
      power: '50.00',
      cost: '50.00'
    }
  }

  // 其他车牌返回null，表示无状态
  return null
}

// 模拟接口请求获取充电桩数据
const loadChargingStations = async () => {
  try {
    // uni.showLoading({
    //   title: '加载中...'
    // })
    //
    // 模拟网络请求延迟
    await new Promise(resolve => setTimeout(resolve, 800))

    // 模拟接口返回数据
    const response = {
      code: 200,
      message: '获取成功',
      data: allStations.value
    }

    if (response.code === 200) {
      chargingStations.value = response.data
      console.log('充电桩数据加载成功，共', chargingStations.value.length, '条数据')
    } else {
      throw new Error(response.message || '获取数据失败')
    }
  } catch (error) {
    console.error('加载充电桩数据失败：', error)
    uni.showToast({
      title: '数据加载失败',
      icon: 'none',
      duration: 2000
    })
  } finally {
    // uni.hideLoading()
  }
}

// 筛选tab点击事件
const onFilterTabClick = (index) => {
  activeFilterTab.value = index
  refreshChargingData()
}

// 刷新充电桩数据
const refreshChargingData = async () => {
  const filterType = filterTabs.value[activeFilterTab.value]
  console.log('刷新数据，筛选条件：', filterType)

  try {
    uni.showLoading({
      title: '筛选中...'
    })

    // 模拟接口请求延迟
    await new Promise(resolve => setTimeout(resolve, 500))

    // 从模拟接口获取数据并筛选
    let filteredStations = [...allStations.value]

    switch(filterType) {
      case '距离':
        filteredStations.sort((a, b) => {
          const distanceA = parseInt(a.distance)
          const distanceB = parseInt(b.distance)
          return distanceA - distanceB
        })
        break
      case '价格':
        filteredStations.sort((a, b) => {
          const priceA = parseFloat(a.price.replace('¥', '').replace('/度', ''))
          const priceB = parseFloat(b.price.replace('¥', '').replace('/度', ''))
          return priceA - priceB
        })
        break
      case '快充':
        filteredStations = filteredStations.filter(station => station.type === '快')
        break
      case '慢充':
        filteredStations = filteredStations.filter(station => station.type === '慢')
        break
    }

    chargingStations.value = filteredStations

    // uni.showToast({
    //   title: `已按${filterType}筛选，共${filteredStations.length}条`,
    //   icon: 'none',
    //   duration: 1500
    // })
  } catch (error) {
    console.error('筛选数据失败：', error)
    uni.showToast({
      title: '筛选失败',
      icon: 'none',
      duration: 2000
    })
  } finally {
    uni.hideLoading()
  }
}

// TabBar相关方法
const onTabChange = (index) => {
  currentTabIndex.value = index
}

const onCenterClick = () => {
   console.log('中间按钮点击')
 }
</script>

<style scoped>
.index-page {
  min-height: 100vh;
  /* background-color: #f5f5f5; */
}

/* 轮播图样式 */
.banner-section {
  height: 200px;
}

.banner-swiper {
  height: 100%;
}

.banner-item {
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
}

/* 功能模块样式 */
.function-modules {
  display: flex;
  justify-content: space-around;
  padding: 20px 0px 20px 0px;
  background-color: #fff;
  margin-bottom: 10px;
}

.module-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.module-icon {
  width: 42px;
  height: 40px;
  margin-bottom: 8px;
}

.module-text {
  font-size: 16px;
  color: #000000;
}

/* 多功能区域样式 */
.multi-function-area {
  /*margin-bottom: 10px;*/
}

/* 车牌输入区域 */
.license-plate-section {
  /* background: #f8f9fa; */
  background: linear-gradient( 180deg, #F3F9FA 0%, #E8F8F6 100%);
  /* border-radius: 12px; */
  padding: 16px;
  /* margin: 16px; */
}

.card-header {
  margin-bottom: 12px;
  /* #525254 */
  color: #525254;
  /* font-size: 27px; */
  /* font-weight: 600; */
}
.packing-header{
margin-bottom: 12px;
color: #525254;
}
.packing-header text {
  font-size: 30px;
  font-weight: 600;
  color: #000000;
  letter-spacing: 1px;
}

.card-header text {
  font-size: 20px;
  font-weight: 500;
  color: #525254;
}

.plate-input-wrapper {
  margin-bottom: 16px;
}

.history-plates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.history-plate-item {
  display: flex;
  align-items: center;
  background: #CCE8E4;
  border-radius: 20px;
  padding: 2px 12px;
  gap: 4px;
}

.plate-text {
  font-size: 16px;
  color: #000000;
  cursor: pointer;
}

.query-btn {
  width: 630rpx;
  height: 70rpx;
  background: #1CCCB4;
  color: white;
  border: none;
  border-radius: 24px;
  /* padding: 12px; */
  font-size: 16px;
  font-weight: 500;
  margin-top: 0;
}

/* 停车中状态区域 */
.parking-status-section {
  background: linear-gradient(135deg, #f8fdfc 0%, #e8f8f5 100%);
  padding: 20px;
}

/* 当前车牌显示 */
.current-plate-display {
  text-align: center;
  margin-bottom: 16px;
}

.current-plate-number {
  display: inline-block;
  background: #CCE8E4;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 20px;
  letter-spacing: 2px;
}

/* 充电中状态区域 */
.charging-status-section {
 background: linear-gradient(135deg, #f8fdfc 0%, #e8f8f5 100%);
  padding: 20px;
}

/* 状态卡片通用样式 */
.status-card {
  border: 1px solid #1CCCB4 ;
  border-radius: 12px;
  padding: 12px;
  height:135px;
  /* background: linear-gradient(135deg, #f8fdfc 0%, #e8f8f5 100%); */
}

/* 卡片头部布局 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.card-header1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
/* 车牌显示区域 */
.plate-display {
  margin-bottom: 8px;
}

.plate-number {
  display: inline-block;
  background: #CCE8E4;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 20px;
  letter-spacing: 2px;
}

/* 停车状态信息 */
.status-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.location-name {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 8px;
}

.parking-duration {
  font-size: 14px;
  color: #666;
}

/* 费用信息 */
.fee-info {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 8px;
}

.fee-icon {
  font-size: 16px;
  color: #ff6b35;
  margin-right: 4px;
}

.fee-amount {
  font-size: 28px;
  font-weight: 450;
  color: #000000;
}

/* 费用标签区域 */
.fee-label-section {
  text-align: center;
  margin-bottom: 20px;
}

.fee-label {
  font-size: 14px;
  color: #666;
}

/* 充电头部信息 */
.charging-header-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* 充电位置信息 */
.charging-location {
  margin-bottom: 0;
}

.charging-time {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

/* 充电进度条 */
.charging-progress {
  margin-bottom: 16px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1CCCB4 0%, #00d4aa 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* 充电统计信息 */
.charging-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-value-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

.stat-icon {
  width: 20px;
  height: 20px;
  margin-bottom: 0;
}

.stat-value {
  font-size: 20px;
  font-weight: 450;
  color: #000000;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

/* 操作按钮 */
.action-button {
  height: 36px;
  width:98px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* padding: 0 20px; */
  white-space: nowrap;
}

.parking-btn {
  background: linear-gradient(90deg, #ff6b35 0%, #ff8a65 100%);
}

.charging-btn {
  background: linear-gradient(90deg, #ff6b35 0%, #ff8a65 100%);
}
.chargingCompleted-btn {
  background: linear-gradient(90deg, #1CCCB4 0%, #00d4aa 100%);
}
.button-text {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

/* 吸顶搜索栏和筛选tabs样式 */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff;
  padding: 16px 16px 0 16px;
  /*border-bottom: 1px solid #f0f0f0;*/
}

.search-bar {
  position: relative;
  margin-bottom: 12px;
}

/* 充电桩列表样式 */
.charging-list-section {
  /*background-color: #f8f8f8;*/
  padding: 0 16px 16px 16px;
}

.search-input {
  /*width: 100%;*/
  height: 38px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 22px;
  padding: 0 50px 0 20px;
  font-size: 15px;
  color: #333;
}

.search-input::placeholder {
  color: #999;
}

.search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  /*width: 20px;*/
  /*height: 20px;*/
}

.filter-tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  padding: 0 4px;
  background-color: #fff;
}

.filter-tab {
  font-size: 15px;
  /*color: #666;*/
  padding: 8px 0;
  position: relative;
}

.filter-tab.active {
  color: #1CCCB4;
  font-weight: 500;
}

.filter-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1CCCB4;
  border-radius: 1px;
}

.charging-station-item {
  background: white;
  border-radius: 12px;
  padding: 2px 8px 2px 8px;
  margin-bottom: 12px;
  /*box-shadow: 0 2px 12px rgba(0,0,0,0.08);*/
  border-bottom: 1px solid #f0f0f0;
}

.station-container {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
}

.station-image {
  flex-shrink: 0;
}

.pile-icon {
  width: 100rpx;
  height: 100rpx;
}

.station-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.station-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.location-name {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  line-height: 1.3;
}

.location-distance {
  font-size: 13px;
  color: #32333F;
  /*background: #f5f5f5;*/
  padding: 2px 0px 2px 0px;
  border-radius: 10px;
  /*margin-left: 8px;*/
}

.station-details {
  /*margin: 2px 0;*/
}

.station-rating {
  font-size: 13px;
  font-weight: 400;
  color: #32333F;
  line-height: 1.4;
}

.station-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*margin-top: 4px;*/
  margin-bottom: 16px;
}

.price-value {
  font-size: 18px;
  color: #1CCCB4;
  font-weight: 500;
}

.charging-type-tag {
  background: #ff6b35;
  border-radius: 4px;
  padding: 2px 2px 2px 2px;
  display: flex;
  /*align-items: center;*/
  gap: 6px;
  align-items: baseline;
}

.charging-type-tag.slow-charge {
  background: #1CCCB4;
}

.charging-type-tag.fast-charge {
  background: #ff6b35;
}

.charging-type-text {
  color: white;
  font-size: 13px;
  font-weight: 500;
  margin-left: 4px;

}

.availability-inner {
  background: white;
  border-radius: 4px;
  padding: 2px 6px;
}

.availability-text {
  color: #000000 ;
  font-size: 13px;
  font-weight: 500;
}






/* 悬浮客服按钮 */
.movable-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 900;
}

.customer-service {
  position: absolute;
  left: calc(100vw - 120px);
  top: calc(100vh - 200px);
  pointer-events: auto;
  z-index: 900;
}

.service-button {
  /*transform: translateX(302.6px) translateY(763.3px) translateZ(0px) scale(1);*/

  background-color: #F76429;
  border-radius: 25px 0px 0px 25px;
  padding: 10px 56px;
  display: flex;
  flex-direction: row;  /* 新增：确保从左到右排列 */
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  justify-content: center;

}
.service-icon {
  margin-left: 5px;
}

.service-text {
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

/* 缴费弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

.payment-modal {
  width: 100%;
  max-width: 400px;
  height: 1390rpx;
  background-color: #FFFFFF;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.payment-modal {
  display: flex;
  flex-direction: column;
}
.payment-modal .modal-header {
  position: relative;
  display: block;
  padding: 16px 20px;
  height: 200rpx;
  background-image: url('static/images/bg_car5.png');
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.payment-modal .modal-header .modal-title {
  position: absolute;
  left: 20px;
  top: 14px;
  z-index: 2;
}
.payment-modal .modal-header :deep(uni-icons) {
  position: absolute;
  right: 20px;
  top: 14px;
  z-index: 2;
  color: #fff;
}
.payment-modal .modal-header .fee-display {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  margin: 0;
  z-index: 1;
}
.payment-modal .modal-header .fee-symbol {
  font-size: 28px;
  color: #000;
  font-weight: 600;
}
.payment-modal .modal-header .fee-amount {
  font-size: 44px;
  color: #000;
  font-weight: 700;
  margin-left: 6px;
}
.payment-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.payment-footer {
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background-color: #fff;
  box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.06);
}
.payment-details {
  margin-bottom: 30px;
}
.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #F5F5F5;
}
.detail-row:last-child {
  border-bottom: none;
}
.detail-label {
  font-size: 14px;
  color: #666666;
  flex: 1;
}
.detail-value {
  font-size: 14px;
  color: #333333;
  text-align: right;
}
.payment-tag {
  background-color: #E8F5E8;
  border-radius: 12px;
  padding: 4px 12px;
}
.tag-text {
  font-size: 12px;
  color: #4CAF50;
}
.payment-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.pay-button {
  background: linear-gradient(135deg, #00D4AA 0%, #00B894 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 25px;
  /* padding: 16px; */
  font-size: 16px;
  font-weight: 600;
  width:660rpx;
  height:95rpx;
  line-height: 95rpx;
}
.contact-button {
  background-color: #F5F5F5;
  color: #666666;
  border: none;
  border-radius: 25px;
  /* padding: 20px; */
  font-size: 16px;
  font-weight: 500;
  width:660rpx;
  height:95rpx;
  line-height: 95rpx;
}


</style>
